<section class="cf" id="fundamentals1">

	<div class="page one hasHeader">

		<div class="onecol">

            <h1>Designing Web Applications</h1>
			<h2 class="main-caption">First Master the Fundamentals</h2>
			<p>To borrow a quote from a basketball legend, before you do anything else, you must ‘first master the fundamentals’<sup>1</sup>. All great web apps must have a tight-focus aimed at its users.</p>
			<h3>Create a clear statement of purpose</h3>
			<p>Great web apps make it easy for users to focus their attention. People typically can only focus on a limited number of tasks at a time. Instead of providing lots of options and features, users appreciate web applications that allow them to complete the task at hand, without distractions or experiences that were shoehorned into a design that wasn’t meant for it.  </p>
			<p>To ensure your application has a tight-focus aimed at its users, create a short description of your application’s purpose and who you expect to use it.  Think of it like your elevator pitch.</p>
			<ol class="book-ol">
				<li><span class="big-bullets">1.</span><strong><a class="internal" href="/webappfieldguide/case-studies/wayfindit-3/">Focus on the main scenario</a></strong> most people will use your application for, and limit the resources spent on other scenarios.</li>
				<li><span class="big-bullets">2.</span><strong>Separate orthogonal or unrelated tasks</strong> into their separate applications, which may mean your website provides multiple applications, with each app helping the user focus on a single task.</li>
			</ol>
			<div class="footnote mt3">
				<p><strong>Footnotes</strong><br />1. Quote from Boston Celtics basketball legend and web app enthusiast, Larry Bird.</p>
			</div>

		</div><!--end col -->

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">

            <div class="image_block centery w80">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_focus_no_orthagonal.jpg" alt="Figure 2.1 - Keep it focused, don't sweat the other stuff!" title="Figure 2.1 - Keep it focused, don't sweat the other stuff!">
            	<p class="caption">Figure 2.1 - Keep it focused, don't sweat the other stuff!</p>
            </div>

		</div><!--end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="fundamentals2">

	<div class="page one">

		<div class="onecol">

        	<p>Let’s look at a couple hypothetical purpose statements for some great web applications:</p>

			<ul class="ext_ul" id="ext6">
		 		<a href="#" target="_blank" class="previewWindow">
       			<div class="arrow"></div>
       			<div class="screenshot"><img src=""/></div>
       			<div class="caption"></div>
       	  		</a>
				<li><a class="preview no-ajaxy" data-url="screenshot_gojee.jpg" href="http://www.gojee.com/" title="Gojee" target="_blank">Gojee</a> - Hand picked recipes personalized for the user.</li>
				<li><a class="preview no-ajaxy" data-url="screenshot_astrid.jpg" href="http://www.astrid.com/" title="Astrid" target="_blank">Astrid</a> - A social to-do list that helps individuals and groups stay organized, get more done, and have fun in the process.</li>
				<li><a class="preview no-ajaxy" data-url="screenshot_wanderfly.jpg" href="http://www.wanderfly.com/" title="Wanderfly" target="_blank">Wanderfly</a> - Help users discover new experiences based on their interests and budget.</li>
				<li class="li_last"><a class="preview no-ajaxy" data-url="screenshot_kindle.jpg" href="https://read.amazon.com/about" title="Kindle Cloud Reader" target="_blank">Kindle Cloud Reader</a> - Read your Kindle books, instantly.</li>
			</ul>

			<h3>Be self-contained</h3>
			<p>While web applications may pull in data from other sites or applications, but they are almost always self-contained, allowing users to complete their tasks without having to navigate to other sites or apps. By this definition, a search engine would not qualify as an application because it sends users off to other sites to complete their task.<p>
			<h3>Keep the user’s experience focused on the application</h3>
			<p>When users open a web application, they expect to have an experience that feels like a single application, and not a collection of web pages. A great web application differentiates itself from a website by existing as a stand-alone entity, not buried within a web site’s normal web-like navigation and experience.<p>

        </div><!--end col -->

        <div class="t_fix" id="ext6_div"></div><!-- External Links Reference -->

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">

            <div class="image_block centery w80">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_self_contained.jpg" alt="Figure 2.2 - Selfcontainedness is a virtue!" title="Figure 2.2 - Selfcontainedness is a virtue!">
           		<p class="caption">Figure 2.2 - Selfcontainedness is a virtue!</p>
            </div>

		</div><!--end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="functional">

	<div class="page one">

		<div class="onecol">

			<h3>Functional by Design</h3>
			<p>Great web app designs eliminate the non-essential components and allow the user to focus on the core components needed to be productive and accomplish their task. When designing your application, it’s important to keep the following guidelines in mind:</p>

			<ol class="book-ol">
				<li><span class="big-bullets">1.</span><strong>Minimize superfluous web page content</strong> that isn’t necessary for the application to function.  For example, the logo that typically is on the top left of a page that takes a user back to the homepage, or a footer that contains links to the terms of service, privacy policy, program policy and your home page.</li>
				<li><span class="big-bullets">2.</span><strong><a class="internal" href="/webappfieldguide/case-studies/picturepage-1/">Minimize the number of pages and keep the experience focused in a single, consistent experience</a></strong> that does not require significant navigation from page to page, but instead changes from one view to another.</li>
				<li><span class="big-bullets">3.</span><strong><a class="internal" href="/webappfieldguide/case-studies/shipshot-2/">Design the navigation around the core scenario</a></strong> of your application and eliminate typical web page navigation. Your web application likely doesn’t need a home button, or multiple navigational categories that take users to different parts within your website.</li>
				<li><span class="big-bullets">4.</span><strong><a class="internal" href="/webappfieldguide/case-studies/khan-2/">Keep primary components accessible at all times</a></strong> to allow people to easily focus their attention in the right place.</li>
				<li><span class="big-bullets">5.</span><strong>Provide a consistent design and experience</strong> no matter where in the application the user is. For example, no matter if the user is composing a mail, searching their mail, reviewing new messages, the log off button, the ability to return to the inbox, or create a new message are all located in the same place across different views.</li>
			</ol>

		</div><!--end col -->

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">

            <div class="image_block centery w80">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_transparent_tech.jpg" alt="Figure 2.3 - Maintain the experience. Keep traditional tech elements hidden!" title="Figure 2.3 - Maintain the experience. Keep traditional tech elements hidden!">
				<p class="caption">Figure 2.3 - Maintain the experience. Keep traditional tech elements hidden!</p>
            </div>

        </div><!--end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="interact">

	<div class="page one">

		<div class="onecol">
			<h2 class="main-caption">Encourage users to interact, engage and accomplish</h2>
			<p>A web application should encourage people to interact, engage, and accomplish something, rather than passively view content, like buying movie tickets, writing documents or sharing photos and videos with friends. Unlike websites, web applications provide users with a feeling of ownership and the ability to interact with content or people.</p>
			<h3>Make it easy to complete the task</h3>
			<p>Many people don’t have the time or attention span to figure out how to use an application. Your web applications should be easy for users to consume information and choose what they want to do next. Streamline your interface so that users can immediately grasp how to use it.</p>
			<p>Great web applications are instantly usable, and require little training or help to be productive on their first use. To help people be successful when using your application you should:</p>
			<ol class="book-ol">
				<li><span class="big-bullets">1.</span><strong><a class="internal" href="/webappfieldguide/case-studies/shipshot-1/">Reduce the number of controls and options</a></strong> that are provided to the user to streamline their experience and help them complete the task at hand.</li>
				<li><span class="big-bullets">2.</span><strong><a class="internal" href="/webappfieldguide/case-studies/khan-1/">Be consistent in the look and feel of the information and controls</a></strong> that you show the user and eliminate the need for them to look for or figure out what something does.</li>
				<li><span class="big-bullets">3.</span><strong>Provide clear, easy to understand labels on all controls</strong> so it’s easy to know what they do.</li>
			</ol>

		</div><!--end col -->

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">

            <h3>Take advantage of the capabilities of the device</h3>
			<p>Modern browsers are giving developers access to more and more capabilities of the device.  For example, web applications can be location-aware, provide details about the motion or orientation of the device, and even store data on the hard disk. And more capabilities are coming soon, like access to the camera, microphone and many other components.</p>
			<p>Here are a few ways that you can take advantage of the capabilities of the device:</p>
			<p class="callout lefty w33">Web Applications can be location-aware, provide details about the motion or orientation of the device, and even store data on the hard disk.</p>
			<ol class="book-ol">
				<li><span class="big-bullets">1.</span><strong><a class="internal" href="/webappfieldguide/case-studies/wayfindit-2/">When appropriate, provide information that’s geographically relevant to the user</a></strong>, such as restaurants or venues nearby.</li>
				<li><span class="big-bullets">2.</span><strong>Use the device motion or device orientation</strong> as new input types for games; instead of using the mouse or cursor, users should be able to move their game characters by moving the device.</li>
				<li><span class="big-bullets">3.</span><strong><a class="internal" href="/webappfieldguide/case-studies/shipshot-3/">When dealing with large amounts of data, store it locally on the user’s computer</a></strong> so that it doesn’t need to be transferred back and forth every time the web app starts.</li>
			</ol>

		</div><!--end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="multimedia">

	<div class="page one">

		<div class="onecol">

            <h3>Use multimedia to enrich the experience</h3>
			<p>Rich multimedia experiences were once limited to client applications, but are now available to web applications and can go a long way to creating a richer, more engaging experience for the user. Multimedia might be part of the overall experience, for example in games or video chat applications, or it might provide only an incremental experience to remind them of meetings or new messages.</p>
			<p>Some strategies for using multimedia to enrich your experience include:</p>
			<p class="callout lefty w33">Incorporate multimedia to enhance user experience and immersiveness</p>
			<ol class="book-ol">
				<li><span class="big-bullets">1.</span><strong><a class="internal" href="/webappfieldguide/case-studies/wayfindit-2/">Provide semantic meaning to events</a></strong>, like notification of new email, or reminders for upcoming events.</li>
				<li><span class="big-bullets">2.</span><strong>Always enable the user to disable any sounds</strong> or other multimedia experiences that may be distracting.</li>
				<li><span class="big-bullets">3.</span><strong>Use the page visibility API to prevent multimedia from playing</strong> if the user isn’t looking at your app.</li>
			</ol>

        </div><!--end col -->

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">

			<div class="image_block centery w80">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_multimedia.jpg" alt="Figure 2.4 - Multimedia helps take your web app to eleven!" title="Figure 2.4 - Multimedia helps take your web app to eleven!">
            	<p class="caption">Figure 2.4 - Multimedia helps take your web app to eleven!</p>
            </div>

		</div><!--end col -->

	</div><!-- end page two -->

</section>

<section class="cf" id="design-patterns">

	<div class="page one">

		<div class="onecol">
			<h2 class="main-caption">Follow These Design Patterns</h2>
			<h3>Use design paradigms similar to that of native applications</h3>
			<p>The visual appearance, visual interactions and actionable interface should be a good indication to users that they’re looking at a web application instead of a website. The interactivity of web applications makes native application design practices a natural fit.</p>
			<p>Some guidance to help you do this:</p>
			<ol class="book-ol">
				<li><span class="big-bullets">1.</span><strong><a class="internal" href="/webappfieldguide/case-studies/khan-3/">Use buttons that result in actions</a></strong> instead of links that result in navigation to different parts of your application.</li>
				<li><span class="big-bullets">2.</span><strong><a class="internal" href="/webappfieldguide/case-studies/wayfindit-3/">Provide toolbars and menus as ways of providing access to common activities</a></strong> that are needed throughout your application.</li>
				<li><span class="big-bullets">3.</span><strong><a class="internal" href="/webappfieldguide/case-studies/wayfindit-2/">Use dialogs to keep the user informed or ask for information</a></strong> instead of navigating to new pages.</li>
			</ol>
			<h3>Use a client-side architecture model</h3>
			<p>Developers can trust modern browsers to give them the performance and features they need to build great applications.  Web apps should take advantage of these new features and performance by separating the data from the presentation layer, doing this will make it easier to reduce the network overhead, more easily provide offline experiences and change the presentation layer without reworking the entire application.</p>

        </div><!--end col -->

	</div><!-- end page -->

	<div class="page two">

		<div class="onecol">
			<div class="image_block centery w90">
				<img class="center" src="/webappfieldguide/img/Appward_Illustrations_familiar_design_details.jpg" alt="Figure 2.5 - Use familiar design paradigms to enhance interactivity and immersiveness!" title="Figure 2.5 - Use familiar design paradigms to enhance interactivity and immersiveness!">
            	<p class="caption">Figure 2.5 - Use familiar design paradigms to enhance interactivity and immersiveness!</p>
            </div>
      <p>Here are some things to think about as your design your web app:</p>
      <ol class="book-ol">
        <li><span class="big-bullets">1.</span><strong>Use AJAX calls to transfer data rather than relying on the request-response model</strong> where the entire page, including all of the data and presentation layer, is sent back and forth.</li>
        <li><span class="big-bullets">2.</span><strong><a class="internal" href="/webappfieldguide/case-studies/shipshot-3/">Use IndexedDB to keep user generated or user consumed data locally.</a></strong>  To ensure that you never lose any user data, always write it locally first, then sync it to your service.</li>
      </ol>
      <p>If you follow these guidelines when designing your web app, your app will feel fast, and behave like a native app.</p>


		</div><!--end col -->

	</div><!-- end page two -->

</section>
